<template>
  <div class="chart">
    <slot></slot>
    <div class="chart-footer"></div>
  </div>
</template>
<style scoped>
.chart {
  display: inline-block;
  width: vw(500);
  height: vh(400);
  padding: vw(10);
  margin: vw(10);

  background-size: cover;
  background-color: rgba(240, 248, 255, 0.1);
  position: relative;
  &::before {
    content: ' ';
    position: absolute;
    top: 0;
    width: 10px;
    left: 0;
    height: 10px;
    border-left: 2px solid #02a6b5;
    border-top: 2px solid #02a6b5;
  }
  &::after {
    content: ' ';
    position: absolute;
    top: 0;
    width: 10px;
    right: 0;
    height: 10px;
    border-right: 2px solid #02a6b5;
    border-top: 2px solid #02a6b5;
  }
  .chart-footer {
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    &::before {
      content: ' ';
      position: absolute;
      bottom: 0;
      width: 10px;
      left: 0;
      height: 10px;
      border-left: 2px solid #02a6b5;
      border-bottom: 2px solid #02a6b5;
    }
    &::after {
      content: ' ';
      position: absolute;
      bottom: 0;
      width: 10px;
      right: 0;
      height: 10px;
      border-right: 2px solid #02a6b5;
      border-bottom: 2px solid #02a6b5;
    }
  }
}
</style>
